<template>
  <div class="division-table">
    <q-table
      ref="qtable"
      row-key="iid"
      :show-index="true"
      :pagination="true"
      :loading="loading"
      :data-source="dataSource"
      v-model:page-size="pageSize"
      v-model:page-no="pageNo"
      :show-quick-jumper="true"
      :total="total"
      @changePage="changePage"
      @search="search"
      @remove="remove"
      @add="add"
      @see="see"
      @edit="edit">
      <a-table-column key="name" dataIndex="name" :title="$t('core.model.division.name')"></a-table-column>
      <a-table-column
        key="longitude"
        dataIndex="longitude"
        :title="$t('core.model.division.longitude')"
        align="center"
        width="120px">
        <template #default="{ text, record }">
          {{text + record.longitudeUnit}}
        </template>
      </a-table-column>
      <a-table-column
        key="latitude"
        dataIndex="latitude"
        :title="$t('core.model.division.latitude')"
        align="center"
        width="120px">
        <template #default="{ text, record }">
          {{text + record.latitudeUnit}}
        </template>
      </a-table-column>
      <a-table-column
        key="sort"
        dataIndex="sort"
        align="center"
        :title="$t('core.model.division.sort')"
        width="150px">
        <template #default="{ record }">
          <a-input-number
            v-model:value="record.sort"
            :bordered="false"
            size="large"
            :min="0"
            :max="999999999"
            style="width: 100%;"
            @change="sortChange(record)" />
        </template>
      </a-table-column>
    </q-table>

    <!-- 新增行政区划弹框 -->
    <add-model ref="addModel" @addSubmit="addSubmit" />

    <!-- 查看弹框 -->
    <see-model ref="seeModel" />

    <!--  编辑弹框  -->
    <edit-model ref="editModel" @submit="editSubmit"/>

    <!-- 删除确定弹框 -->
    <remove-model ref="removeModel" @submit="removeSubmit"/>

  </div>

</template>

<script>
import { message } from 'ant-design-vue'
import QTable from '@/components/QTable/QTable';
import AddModel from '@/views/core/division/AddModel';
import RemoveModel from '@/views/core/division/RemoveModel';
import SeeModel from '@/views/core/division/SeeModel';
import EditModel from '@/views/core/division/EditModel';
import { divisonApi } from '@/api/core/division';


export default {
  name: 'DivisionTable',
  components: {
    QTable,
    AddModel,
    RemoveModel,
    SeeModel,
    EditModel
  },
  data() {
    return {
      currentDivison: '', // 当前行政区划树点击的行政区划
      searchInfo: '', // 查询信息
      pageNo: 1, // 当前页
      pageSize: 10, // 分页大小
      total: 0, // 数据总数
      dataSource: [], // 数据集合
      loading: false // 表格是否显示加载状态
    }
  },
  methods : {
    setData (val) {
      this.currentDivison = val
      this.loadData({
        pid: this.currentDivison ? this.currentDivison.key : null,
        pageNo: 1,
        pageSize: 10,
        searchInfo: this.searchInfo
      })
    },
    // 加载数据
    loadData (param) {
      this.loading = true
      if (param.pid === undefined || param.pid === null || param.pid === '') {
        this.total = 0
        this.dataSource = []
        this.loading = false
      } else {
        divisonApi.getListByPid(param).then((res) => {
          if (res.code === 1000) {
            this.total = res.data.total
            this.dataSource = res.data.data
          }
          this.loading = false
        })
      }
    },
    // 分页信息修改
    changePage () {
      // 调用加载数据的方法
      this.loadData(this.createParam(this.pageNo, this.pageSize))
    },
    // 查询操作
    search (searchInfo) {
      this.searchInfo = searchInfo
      this.loadData(this.createParam(1, this.pageSize))
    },
    // 创建搜索参数
    createParam (pageNo, pageSize) {
      return {
        pid: this.currentDivison.key,
        pageNo: pageNo,
        pageSize: pageSize,
        searchInfo: this.searchInfo
      }
    },
    // 删除数据
    remove (selectedRowKeys, selectedRows) {
      this.$refs['removeModel'].open(selectedRowKeys)
    },
    // 删除提交后的回调
    removeSubmit () {
      this.$emit('removeSubmit')
      this.pageNo = 1
      this.changePage()
    },
    // 排序变化
    sortChange (record) {
      divisonApi.modify({
        iid: record.iid,
        sort: record.sort
      }).then((res) => {
        message.success('修改区划权重成功')
        this.changePage()
      })
    },
    // 打开新增弹框
    add () {
      this.$refs['addModel'].open(this.currentDivison)
    },
    // 打开查看弹框
    see (record) {
      this.$refs['seeModel'].open(record)
    },
    // 打开编辑弹框
    edit (record) {
      this.$refs['editModel'].open(record, this.currentDivison.title, this.currentDivison.key)
    },
    /**
     * 新增提交触发
      * @param node 新创建的节点
     */
    addSubmit (node) {
      this.$emit('addSubmit', this.currentDivison, node)
      this.changePage()
    },
    /**
     * 编辑提交触发
     */
    editSubmit (changeResNodes) {
      this.$emit('editSubmit', changeResNodes)
      this.pageNo = 1
      this.changePage()
    }
  }
};
</script>

<style lang="less" scoped>
  .division-table{
    height: 100%;
    .remove-msg-title {
    }
  }
</style>
